﻿@{
    ViewBag.Title = "modifyUserPhotoV2";
    Layout = "/Views/Shared/_LayoutPage1.cshtml";
}

<link href="/Scripts/inc/Cropper/css/normalize.css" rel="stylesheet" />
<link href="/Scripts/inc/Cropper/css/default.css" rel="stylesheet" />
<link href="/Scripts/inc/Cropper/css/main.css" rel="stylesheet" />
<link href="/Scripts/inc/Cropper/dist/cropper.css" rel="stylesheet" />

<div class="table-wrapper products-table section">
    <div class="row-fluid head">
        <div class="span12">
            <h4>修改头像</h4>
        </div>
        <!-- begin modifyUserPhotoDiv -->
        <div id="modifyUserPhotoDiv">
            <!-- Content -->
            <div class="container">
                <div class="row">
                    <div class="span9">
                        <!-- <h3 class="page-header">Demo:</h3> -->
                        <div class="img-container">
                            <img src="@ViewBag.User.Photo" alt="Picture">
                        </div>
                    </div>
                    <div class="span3">
                        <!-- <h3 class="page-header">Preview:</h3> -->
                        <div class="docs-preview clearfix">
                            <div class="img-preview preview-lg"></div>
                            <div class="img-preview preview-md"></div>
                            <div class="img-preview preview-sm"></div>
                            <div class="img-preview preview-xs"></div>
                        </div>

                        <!-- <h3 class="page-header">option</h3> -->
                        <div class="docs-data" style="margin-bottom:1px;">
                            <div class="input-group">
                                <!-- -->
                                <div class="btn-group">
                                    <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="移动">
                                            <span class="icon icon-move"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="裁剪">
                                            <span class="icon icon-crop"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="放大">
                                            <span class="icon icon-zoom-in"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="缩小">
                                            <span class="icon icon-zoom-out"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="向左旋转45度">
                                            <span class="icon icon-rotate-left"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="向右旋转45度">
                                            <span class="icon icon-rotate-right"></span>
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="还原">
                                            <span class="icon icon-refresh"></span>
                                        </span>
                                    </button>
                                </div>
                            </div>

                            <div class="input-group">
                                <div class="btn-group btn-group-justified" data-toggle="buttons">
                                    <button class="btn btn-primary" data-method="setAspectRatio" data-option="1.7777777777777777" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：16 / 9">
                                            16:9
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：4 / 3">
                                            4:3
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="setAspectRatio" data-option="1" type="button" title="固定比例：1 / 1">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：1 / 1">
                                            1:1
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" type="button" title="固定比例：1 / 1">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例： 2 / 3">
                                            2:3
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" type="button" title="自由比例">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="自由比例">
                                            自由比例
                                        </span>
                                    </button>
                                    @*<label class="btn btn-primary active" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
                                        <input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：16 / 9">
                                            16:9
                                        </span>
                                    </label>
                                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
                                        <input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例： 4 / 3">
                                            4:3
                                        </span>
                                    </label>
                                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
                                        <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：1 / 1">
                                            1:1
                                        </span>
                                    </label>
                                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
                                        <input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例： 2 / 3">
                                            2:3
                                        </span>
                                    </label>
                                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
                                        <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="自由比例">
                                            Free
                                        </span>
                                    </label>*@
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="btn-group">
                                    <input name="uploadify" id="inputImage" type="file" style="display:none">
                                    <div class="input-append" title="选择本地文件">
                                        <input id="photoCover" class="span8" type="text" disabled="disabled" style="display:none">
                                        <a class="btn btn-primary" onclick="$('input[id=inputImage]').click();">选择本地文件</a>
                                        <div class="btn btn-primary" title="上传头像" onclick="savePhoto()">上传头像</div>
                                    </div>
                                    <script type="text/javascript">
                                        $('input[id=inputImage]').change(function () {
                                            $('#photoCover').val($(this).val());
                                        });
                                    </script>





                                    @*<label class="btn btn-primary btn-upload" for="inputImage" title="选择本地文件">

                                            <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
                                            <span class="docs-tooltip" data-toggle="tooltip" title="选择本地文件">
                                                <span class="icon icon-upload"></span>
                                            </span>
                                        </label>*@


                                </div>
                            </div>
                            <div class="input-group">




                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                @*<div class="span9 docs-buttons">
                    <!-- <h3 class="page-header">Toolbar:</h3> -->
                    <!-- Show the cropped image in modal -->
                    <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
                                </div>
                                <div class="modal-body"></div>
                                <!-- <div class="modal-footer">
                                  <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
                                </div> -->
                            </div>
                        </div>
                    </div><!-- /.modal -->

                    <div class="input-group">
                            <div class="btn-group">
                               <button class="btn btn-primary" data-method="disable" type="button" title="Disable">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;disable&quot;)">
                                        <span class="icon icon-lock"></span>
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="enable" type="button" title="Enable">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;enable&quot;)">
                                        <span class="icon icon-unlock"></span>
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="clear" type="button" title="Clear">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
                                        <span class="icon icon-remove"></span>
                                    </span>
                                </button>


                                <button class="btn btn-primary" data-method="destroy" type="button" title="Destroy">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
                                        <span class="icon icon-off"></span>
                                    </span>
                                </button>
                            </div>
                        </div>
                                <div class="btn-group btn-group-crop">
                                    <button class="btn btn-primary" data-method="getCroppedCanvas" type="button">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
                                            Get Cropped Canvas
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }" type="button">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 160, &quot;height&quot;: 90 })">
                                            160 &times; 90
                                        </span>
                                    </button>
                                    <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" type="button">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 320, &quot;height&quot;: 180 })">
                                            320 &times; 180
                                        </span>
                                    </button>
                                </div>

                                <button class="btn btn-primary" data-method="getData" data-option="" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
                                        Get Data
                                    </span>
                                </button>

                                <button class="btn btn-primary" data-method="getImageData" data-option="" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getImageData&quot;)">
                                        Get Image Data
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="getCanvasData" data-option="" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCanvasData&quot;)">
                                        Get Canvas Data
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="setCanvasData" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCanvasData&quot;, data)">
                                        Set Canvas Data
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="getCropBoxData" data-option="" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCropBoxData&quot;)">
                                        Get Crop Box Data
                                    </span>
                                </button>
                                <button class="btn btn-primary" data-method="setCropBoxData" data-target="#putData" type="button">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCropBoxData&quot;, data)">
                                        Set Crop Box Data
                                    </span>
                                </button>




                                <input class="form-control" id="putData" type="text" placeholder="Get data to here or set data with this value">



                            </div><!-- /.docs-buttons -->

                            <div class="span9 docs-toggles">
                                <!-- <h3 class="page-header">Toggles:</h3> -->


                                <div class="dropdown dropup docs-options">
                                    <button class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" type="button" data-toggle="dropdown" aria-expanded="true">
                                        Toggle Options
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="toggleOptions">
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="strict" checked>
                                                strict
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="responsive" checked>
                                                responsive
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="checkImageOrigin" checked>
                                                checkImageOrigin
                                            </label>
                                        </li>

                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="modal" checked>
                                                modal
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="guides" checked>
                                                guides
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="highlight" checked>
                                                highlight
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="background" checked>
                                                background
                                            </label>
                                        </li>

                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="autoCrop" checked>
                                                autoCrop
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="dragCrop" checked>
                                                dragCrop
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="movable" checked>
                                                movable
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="resizable" checked>
                                                resizable
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="rotatable" checked>
                                                rotatable
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="zoomable" checked>
                                                zoomable
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="touchDragZoom" checked>
                                                touchDragZoom
                                            </label>
                                        </li>
                                        <li role="presentation">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" name="option" value="mouseWheelZoom" checked>
                                                mouseWheelZoom
                                            </label>
                                        </li>
                                    </ul>
                                </div><!-- /.dropdown -->
                            </div><!-- /.docs-toggles -->*@
            </div>
        </div>


    </div>
    <!-- end modifyUserPhotoDiv -->
    <div>
    </div>
</div>

<script src="/Scripts/inc/Cropper/dist/cropper.js"></script>
<script src="/Scripts/inc/Cropper/main.js"></script>
<script type="text/javascript">
    function savePhoto() {
        
        var _canvas = imageOperatorV2.imageCropper.ResultImageCanvas();
        var data = _canvas.toDataURL();
        var b64 = data.substring(22);
        $.post("/user/modifyUserPhoto", { data: b64 }, function () {
            alert("上传成功!");
            if (parent.window) {
                parent.window.refreshPhoto();
            }
        });
    }
    $(function () {
        var aaa = $('button[data-method="setAspectRatio"]');
        $(aaa).click(function (sender) {
            $(aaa).each(function () {
                $(this).removeClass("active");
            });
            $(sender).addClass("active");
        });
    });
</script>